<template>
  <div class="unreadMain">
    <div class="topTitle">
      <div class="title-text">未读消息</div>
    </div>
    <div class="content-main">
      <div class="head header">
        <div style="display: flex;padding-top: 24px;">
          <!-- <div>
            <el-button type="plain" @click="allreadClick">标记已读</el-button>
          </div> -->
          <div class="search-line">
            <span>选择日期：</span>
            <el-date-picker style="margin-left: 10px;" v-model="search.daterange" type="daterange" align="right"
              placeholder="选择时间区间" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
              :picker-options="pickerOptions" />
          </div>
          <div class="search-line">
            <span>所属应用：</span>
            <el-select v-model="search.source" style="margin-left: 10px;" clearable placeholder="所属应用">
              <el-option v-for="item in sysAppInfo" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </div>
          <div class="search-line">
            <span>标题名称：</span>
            <el-input v-model="search.content" placeholder="请输入" style="width: 220px;margin-left: 10px;" />
          </div>
          <div class="search-line">
            <el-button type="primary" @click="queryData(1)" icon="el-icon-search" class="searchBtn">查询
            </el-button>
            <el-button @click="regest" class="deleteBtn">重置
            </el-button>
          </div>
        </div>
        <div style="margin: 24px 0px 0px 24px;">
          <el-button type="primary" @click="allreadClick(true)" class="searchBtn">标记已读
          </el-button>
          <el-button type="primary" @click="allreadClick(false)" class="searchBtn">全部已读
          </el-button>
        </div>
      </div>
      <!-- <div style="border-top: 1px solid rgba(151, 151, 151, 0.3);">
        <div class="goods-check">
          <div class="check-content">
            <el-checkbox-button v-model="checkAll" :indeterminate="isIndeterminate"
              style="margin-left: 15px;margin-top: -2px;" @change="handleCheckAllChange">全部消息类型</el-checkbox-button>
            <el-checkbox-group v-model="msgLevel" @change="handlecheckedItemsChange">
              <el-checkbox-button v-for="(item) in syaTypeList" :key="item.index" :label="item.value">
                {{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
      </div> -->
      <div>
        <el-table ref="multipleTable" v-loading="loading" :height="tbHeight" :data="tableData"
          style="width: 100%;margin-top:24px" @selection-change="handleSelectionChange" :stripe="false" :border="false">
          <!-- <el-table-column type="selection" width="45" /> -->
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="title" label="消息标题" width="220" />
          <el-table-column label="消息内容" header-align="center" show-overflow-tooltip align="left">
            <template slot-scope="scope">
              <div style="display: flex;">
                <!-- <div v-if="scope.row.state === 0" class="radius" style="margin-left:20px" /> -->
                <div style="margin-left:10px">{{ scope.row.content }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="msgLevelName" label="消息类型" width="220">
            <template slot-scope="scope">
              <div>
                <div v-for="(item,index) in syaTypeList">{{ scope.row.msgLevel === item.value ?
                  item.label:'' }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sourceName" label="所属应用" width="220" />
          <el-table-column prop="createTime" width="220" label="创建时间" />
        </el-table>
      </div>
      <div>
        <div class=" pageClass">
          <el-pagination :current-page="pageNum" class="paginaClass" :page-sizes="[20, 40, 60, 80]"
            :page-size="pageSize" layout="total, prev, pager, next, sizes, jumper" :total="total"
            @size-change="changePageSize" @current-change="changePage" />
        </div>
      </div>
    </div>

  </div>
</template>
<script type="text/javascript">
  import { mapActions, mapState } from 'vuex'
  export default {
    name: 'ReceiveSampleMain',
    data() {
      return {
        options: [],
        tableData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        loading: false,
        tbHeight: 0,
        checkAll: false,
        isIndeterminate: false,
        tableIds: [],
        msgLevel: [],
        search: {
          daterange: '' // [new Date(), new Date()]
        },
        syaTypeList: [
          {
            label: '系统消息',
            value: 'system'
          },
          {
            label: '告警消息',
            value: 'message'
          },
          {
            label: '任务消息',
            value: 'task'
          }
        ],
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      }
    },
    computed: {
      ...mapState('messageCenter', ['sysAppInfo', 'dicInfo'])

    },
    created() {
      const type = this.$route.query.type
      if (type) {
        this.msgLevel = [type]
      }
      this.queryData(1)
      this.listByUser()
      this.getDic()
      this.setTableHeight()
    },
    methods: {
      ...mapActions('messageCenter', ['mylist', 'listByUser', 'getDic', 'readMessage']),
      setTableHeight() {
        this.$nextTick(() => {
          this.$set(
            this,
            'tbHeight',
            (document.body.offsetWidth < 1285 ? 230 : 600)
          )
        })
      },
      // 表格选择
      handleSelectionChange(value) {
        value.forEach(element => {
          this.tableIds = value.map(item => { return item.id })
        })
      },
      handleCheckAllChange(val) {
        this.msgLevel = val ? this.dicInfo.map(item => item.value) : []
        this.isIndeterminate = false
        this.queryData(1)
      },
      handlecheckedItemsChange(value) {
        const checkedCount = value.length
        this.checkAll = checkedCount === this.dicInfo.length
        this.$set(this, 'isIndeterminate', [checkedCount > 0 && checkedCount < this.dicInfo.length, false])
        this.queryData(1)
      },
      // 全部已读按钮
      allreadClick(val) {
        if (this.tableData.length === 0) {
          this.$message.info('无未读消息')
          return
        }
        if (val) {
          if (this.tableIds.length === 0) {
            this.$message.info('请选择消息')
          }
        } else {
          if (this.tableIds.length === 0) {
            this.tableData.forEach(element => {
              this.tableIds = this.tableData.map(item => { return item.id })
            })
          }
        }
        this.readMessage(this.tableIds.join(','))
          .then(res => {
            if (res.data.code !== '0') {
              return
            }
            this.$message.success('操作成功')
            this.queryData(1)
            this.tableIds = []
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
      },
      // 修改页码
      changePage(val) {
        this.pageNum = val
        this.queryData()
      },
      // 修改每页长度
      changePageSize(val) {
        this.pageSize = val
        this.queryData(1)
      },
      regest() {
        this.search = {}
        this.queryData(1)
      },
      // 获取列表
      queryData(page) {
        if (page) {
          this.pageNum = page
        }
        var ajaxData = {
          ...this.search,
          ext1: this.msgLevel.join(','),
          pageNo: this.pageNum,
          state: '0',
          pageSize: this.pageSize,
          startTime: this.search.daterange ? this.search.daterange[0].dateStart() : '',
          endTime: this.search.daterange ? this.search.daterange[1].dateEnd() : ''
        }
        this.loading = true
        delete ajaxData.daterange
        this.mylist(ajaxData)
          .then(res => {
            var data = res.data.data.records
            data.forEach(item => {
              this.dicInfo.forEach(dic => {
                if (item.msgLevel === dic.value) {
                  item.msgLevelName = dic.label
                }
              })
            })
            this.tableData = data
            this.loading = false
            this.total = res.data.data.totalNum
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
      }
    }
  }
</script>
<style lang="scss">
  .searchTitle {}

  .header {
    width: 100%;
  }

  .unreadMain {
    .el-table thead {
      th {
        background-color: #E9ECF7;
        border-right: 0px;
        color: #62687f;
        font-size: 13px;
        line-height: 20px;
      }
    }

    .pageClass {
      text-align: right;
      margin: 15px 0px 24px 0px;
      border-top: 1px solid #E9ECF7;
    }

    .paginaClass {
      height: 50px;
      padding-top: 10px;
      padding-right: 24px;
    }

    .title-text {
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 600;
      text-align: LEFT;
      color: #252631;
      line-height: 20px;
      padding: 15px 0px 15px 24px;
    }

    .head {
      margin: 15px;

      .title {
        font-size: 22px;
        font-weight: bold;
      }
    }

    .content-main {
      width: 98%;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 2px 4px 0px #d3d9ec;
      margin: 24px;
    }

    .el-button:focus,
    .el-button:hover {
      color: #62687F;
      border-color: #c9d2e7;
      background-color: #ffffff;
    }



  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3B6CF1;
    border-color: #3B6CF1;
  }

  .topTitle {
    width: 1920px;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px #d3d9ec;
  }



  .search-line {
    margin-left: 24px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #62687f;
    line-height: 20px;
  }




  .goods-check {
    position: relative;
    clear: both;
    line-height: 16px;

    &>div {
      height: 40px;
    }

    h4 {
      position: absolute;
      left: 0;
      top: 0;
      width: 70px;
      line-height: 40px;
      color: #4B4B4B;
      font-size: 13px;
    }

    .check-content {
      line-height: 75px;
      clear: both;

      .el-checkbox-button {
        float: left;
        margin-right: 10px;

        .el-checkbox-button__inner {
          height: 38px;
          line-height: 38px;
          font-size: 16px;
          border-radius: 4px;
          color: #4B4B4B;
          border: 1px solid #e0e0e0;
          padding: 0 10px;
        }
      }

      .el-checkbox-group {
        padding-left: 15px;
      }

      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        color: #FFF;
        background-color: #007AFF;
        border-color: #007AFF;
      }
    }
  }
</style>
